<template>
  <div class="winners">
    <!-- 空状态 -->
    <div v-if="!hasProducts" class="empty-container">
      <img src="@/assets/common/empty.png" alt="" class="w-[64px] h-[64px]" />
      <p>The competition is not over yet. Please vote for your favorite design!</p>
    </div>

    <!-- 有产品数据时显示 -->
    <template v-else>
      <div class="flex items-center justify-center mb-[40px]">
        <img src="@/assets/contest/winner-icon.png" style="width: 65px; height: 64px" />
        <span class="text-[20px] font-[600] text-[#222222] px-[4px] mr-[65px]">
          Winning Entries Released
        </span>
      </div>
      <div class="winners-list">
        <div v-for="(product, index) in ranks" :key="product.feed_id" class="winners-item">
          <div class="flex items-center justify-center mb-[16px]">
            <img
              v-if="index === 0"
              src="@/assets/contest/rank2-icon.png"
              style="width: 146px; height: 56px" />
            <!-- <Rank1Icon v-else-if="index === 1" /> -->
            <img
              v-else-if="index === 1"
              src="@/assets/contest/rank1-icon.png"
              style="width: 146px; height: 56px" />

            <img v-else src="@/assets/contest/rank3-icon.png" style="width: 146px; height: 56px" />
          </div>
          <FeedCard1 :product="product" :showAwardBadge="true" />
        </div>
      </div>
      <!-- 添加4列网格布局展示剩余内容 -->
      <div v-if="remainingProducts.length > 0" class="remaining-products-grid">
        <FeedCard1
          :product="product"
          v-for="product in remainingProducts"
          :key="product.feed_id"
          :showAwardBadge="true" />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import FeedCard1 from '@/components/feed/FeedCard1.vue';
  import { FeedVO } from '@/types/activity';

  interface Props {
    products: FeedVO[];
  }

  const props = withDefaults(defineProps<Props>(), {
    products: () => [],
  });

  // 计算是否有产品数据
  const hasProducts = computed(() => {
    return props.products && props.products.length > 0;
  });

  // 计算ranks - 获取products的前3名并调换第一名和第二名顺序
  const ranks = computed(() => {
    if (!props.products || props.products.length === 0) {
      return [];
    }

    // 获取前3名
    const top3 = [...props.products].slice(0, 3);

    // 如果有至少2个项目，调换第一名和第二名顺序
    if (top3.length >= 2) {
      [top3[0], top3[1]] = [top3[1], top3[0]];
    }

    return top3;
  });

  // 计算剩余的产品（除了前3名）
  const remainingProducts = computed(() => {
    if (!props.products || props.products.length <= 3) {
      return [];
    }
    return props.products.slice(3);
  });
</script>

<style lang="scss" scoped>
  @use '@/styles/mixins' as *;

  .winners {
    padding: 24px;
    position: relative;
    padding-bottom: 50px;
  }
  // 空状态样式
  .empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;

    p {
      margin-top: 16px;
      font-size: 16px;
      color: #666666;
    }
  }

  .winners-list {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding-top: 72px;
  }

  .winners-item {
    padding: 18px 16px;
    border-radius: 8px;
    &:first-child {
      background: linear-gradient(180deg, #e8e8e8 0%, #f8f8f8 100%);
    }
    &:nth-child(2) {
      margin-top: -72px;
      background: linear-gradient(180deg, #f5ead2 0%, #f8f8f8 100%);
    }
    &:nth-child(3) {
      background: linear-gradient(180deg, #f4e1d8 0%, #f8f8f8 100%);
    }
    :deep(.product-image) {
      position: relative;
      aspect-ratio: 1 / 1; // 确保宽高比为1:1，实现正方形
      img {
        height: 100%;
        object-fit: cover;
      }
    }
  }

  // 剩余产品的4列网格布局
  .remaining-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px; // 垂直间距40px，水平间距24px
    margin-top: 40px;
    :deep(.product-image) {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1; // 确保宽高比为1:1，实现正方形
      overflow: hidden;
      height: auto;
      img {
        height: 100%;
        object-fit: cover;
      }
    }
  }
</style>
